<template>
  <Card :shadow="shadow">
    <div class="card-name"><div class="name width1">修改角色</div></div>
    <i-form ref="formData" :model="formData" class="content-con" :label-width="100">
      <Form-item label="角色名称"><i-input v-model="formData.role_name" size="large" placeholder="请输入名称"></i-input></Form-item>
      <Form-Item label="是否开启">
        <Radio-Group v-model="formData.status">
          <Radio label="1">开启</Radio>
          <Radio label="0">关闭</Radio>
        </Radio-Group>
      </Form-Item>
      <Form-item label="权限"><Tree :data="menus" show-checkbox ref="tree"></Tree></Form-item>

      <Form-item class="ban-btn">
        <i-button @click="handleSubmit()" class="save" size="large">保存</i-button>
        <i-button class="save" size="large" @click="btnClick1">返回</i-button>
      </Form-item>
    </i-form>
  </Card>
</template>
<script>
import { saveRole } from '@/api/user'
import { mapMutations } from 'vuex'
export default {
  name: 'role-edit',
  props: {
    shadow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      formData: {
        id: this.$route.params.row.id,
        role_name: this.$route.params.row.role_name,
        status: this.$route.params.row.status.toString(),
        checked_menus: this.$route.params.row.rules
      },
      menus: [],
      menuTree: [],
      ruleValidate: {
        title: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted: function () {
    this.tidyRes()
  },
  methods: {
    ...mapMutations(['closeTag']),
    close () {
      this.closeTag({
        name: 'role-edit',
        params: {
          row: this.$route.params.row
        }
      })
    },
    tidyRes () {
      var data = []
      this.menus = this.$store.state.user.userInfo.menuList

      this.menus.map(menu => {
        data.push(this.initMenu(menu))
      })
      this.$set(this, 'menus', data)
    },
    initMenu (menu) {
      var data = {},
        checkMenus = ',' + this.formData.checked_menus + ','
      data.title = menu.menu_name
      data.id = menu.id
      if (menu.child && menu.child.length > 0) {
        data.children = []
        menu.child.map(child => {
          data.children.push(this.initMenu(child))
        })
      } else {
        data.checked = checkMenus.indexOf(String(',' + data.id + ',')) !== -1
        data.expand = !data.checked
      }
      return data
    },
    // 返回按钮
    btnClick1 () {
      this.close()
    },
    // 表单验证
    handleSubmit () {
      this.formData.checked_menus = []
      this.$refs.tree.getCheckedNodes().map(node => {
        this.formData.checked_menus.push(node.id)
      })
      this.$refs['formData'].validate(valid => {
        if (valid) {
          saveRole(this.formData)
            .then(res => {
              this.$Message.success(res.msg)
              setTimeout(() => this.close(), 1000)
            })
            .catch(err => {
              this.$Message.error(err.msg)
            })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    }
  }
}
</script>
<style lang="less">
.ivu-input {
  border-radius: 0 2px 2px 0;
}
</style>
